<template>
    
    <teleport to="body" >
    <div class="box" :style="{
      top:item.level*240+'px',
      left: item.count*240+'px'}">
      <svg 
      v-if="item.level!=0"
      xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink" :style="{pointerEvents: 'none',
        position:'absolute',left: (item.count-1)*-240+'px',top:-40+'px',width:20000+'px',height:20000+'px'}">
         
        <line :x1="0" :y1="0" :x2="(item.count-1)*240" :y2="40"  style="stroke:#006600;"></line>
</svg>
        <span>ID: {{ item.ID }}</span>
        <span>Name: {{ item.NAME }}</span>
        <span>ID Card: {{ item.IDENTITY_CARD }}</span>
        <span>Parent ID: {{ item.PID }}</span>
        <span>Level: {{ item.level }}</span>    
        <span>Child Count: {{ item.children?item.children.length:0}}</span>
        <template v-if="item.children">
            <Node v-for="(it,ind) in item.children" :item="it" :key="it.ID" :index="ind" :po="{left:item.count*240,top:item.level*240}" />
        </template>
       
  </div>
    </teleport>
 
</template>

<script>
export default {
  props: {
    item:Object,
    index:Number,
    po:Object
  },
  computed:{
     
  },
  created(){
    
  } 
  
 
};
</script>

<style>
 

.box {
  width: 200px;
  height: 200px;
  border: 2px solid black;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: absolute;
}
 
</style>